<template>
    <div>
        <h1>自律一下</h1>
        <input type="text" v-model="newTodoTitle" @keyup.enter="addTodo" placeholder="添加新的待办事项">
        <button @click="addTodo">添加</button>

        <ul>
            <TodoItem v-for="(todo, index) in todos" :key='index' :title="todo.title" :completed="todo.completed"
                @update:completed="updateTodoCompleted(index, $event)" @removeTodo="removeTodo(index)">
            </TodoItem>
        </ul>

    </div>
</template>

<script>
import TodoItem from './TodoItem.vue';
export default {
    components: { 
        TodoItem ,
    },
    data() {
        return {
            todos: [],
            newTodoTitle: "",
        };
    },
    methods: {
        addTodo() {
            if (this.newTodoTitle) {
                this.todos.push({
                    title: this.newTodoTitle,
                    completed: false
                });
                this.newTodoTitle = "";
            }
        },
        removeTodo(index) {
            this.todos.splice(index, 1);
        },
        updateTodoCompleted(index, completed) {
            this.todos[index].completed = completed;
        }
    }
};

</script>
